html, body, #root, #root > div {
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  font-family: Arial;
}

#root > div {
  position: relative;
  padding: 0px;
}

#toolbar {
  position: fixed;
  bottom: 0;
  height: 24px;
  padding: 12px 0;
  width: 100%;
  border-top: 1px solid #999;
  background-color: #CCC;
  z-index: 999;
}

.drag-handle,
.drag-cancel {
  padding: 6px;
  margin: 6px;
  background-color: #CCC;
  border: 2px solid;
}

.drag-handle:hover {
  cursor: move;
}

.drag-cancel:hover {
  cursor: not-allowed;
}

.my-class {
    background-color: green;
    border: 1px solid red;
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}

.my-dragging-class {
    background-color: red;
    border: 1px solid black;
}

.my-resizing-class {
    background-color: blue;
    border: 1px solid black;
    color: white;
}

.my-active-class {
    border: 1px solid black;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

.my-handle-class {
    position: absolute;
    border: 1px solid black;
    border-radius: 50%;
    height: 14px;
    width: 14px;
    font-size: 1em;
    line-height: 1em;
    box-sizing: border-box;
    -webkit-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}

.my-handle-class-tl {
    top: -14px;
    left: -14px;
    cursor: nw-resize;
}
.my-handle-class-tm {
    top: -14px;
    left: 50%;
    margin-left: -7px;
    cursor: n-resize;
}
.my-handle-class-tr {
  top: -14px;
  right: -14px;
  cursor: ne-resize;
}
.my-handle-class-ml {
  top: 50%;
  margin-top: -7px;
  left: -14px;
  cursor: w-resize;
}
.my-handle-class-mr {
  top: 50%;
  margin-top: -7px;
  right: -14px;
  cursor: e-resize;
}
.my-handle-class-bl {
  bottom: -14px;
  left: -14px;
  cursor: sw-resize;
}
.my-handle-class-bm {
  bottom: -14px;
  left: 50%;
  margin-left: -7px;
  cursor: s-resize;
}
.my-handle-class-br {
  bottom: -14px;
  right: -14px;
  cursor: se-resize;
}
.my-handle-class-tl:hover,
.my-handle-class-tm:hover,
.my-handle-class-tr:hover,
.my-handle-class-ml:hover,
.my-handle-class-mr:hover,
.my-handle-class-bl:hover,
.my-handle-class-bm:hover,
.my-handle-class-br:hover {
    transform: scale(1.4);
}
